<template>
  <div class="music_wrapper" @click="openAudioContent">
    <div class="music_wrapper-left">
      <div class="music_wrapper-left-img">
        <img :src="currentPlayMusic.album?.picUrl" alt="" />
      </div>
      <div class="music_wrapper-left-info">
        <span>{{ currentPlayMusic.name }}</span>
        <span>{{ getSonger(currentPlayMusic.artists) }}</span>
      </div>
    </div>
    <div
      class="music_wrapper-right"
      @click.stop="playPauseMusic"
      :class="{ stop: currentPlayMusic.isPlaying }"
    ></div>
    <div
      class="music_wrapper-player"
      :class="[
        showPlayer === true ? 'show' : showPlayer === false ? 'hide' : '',
      ]"
    >
      <base-audio
        :ref="(el) => (baseAudioRef = el)"
        :currentMusic="$store.state.currentMusic"
        :closeMask="closePlayer"
      ></base-audio>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed } from "vue";
import BaseAudio from "./base_audio.vue";
import { useStore } from "vuex";
import { IBaseMusicProps } from "@/type";

interface IStateProps {
  showPlayer: boolean | undefined;
  baseAudioRef: any | null;
}

export default defineComponent({
  /** 底部音乐播放器组件 */
  name: "MusicWrapper",
  components: {
    BaseAudio,
  },
  setup() {
    /** vuex实例 */
    const $store = useStore();
    const state = reactive<IStateProps>({
      /** 是否显示音乐页面 */
      showPlayer: undefined,
      /** 播放器ref实例 */
      baseAudioRef: null,
    });
    /** 隐藏音乐播放器 */
    const closePlayer = () => {
      state.showPlayer = false;
    };
    /** 当前播放音乐 */
    const currentPlayMusic = computed({
      get: () =>
        $store.state.currentMusic || {
          name: "歌曲名称",
          id: 0,
          artists: [{name:'歌手姓名'}],
          isPlaying: false,
        },
      set: (value: IBaseMusicProps) => $store.commit("setCurrentMusic", value),
    });
    /** 获取当前歌的歌手 */
    const getSonger = computed(() => {
      return (artists: any[]) => {
        let songers = "";
        artists.forEach((songer: any) => {
          songers += "/" + songer.name;
        });
        songers = songers.slice(1);
        return songers;
      };
    });
    /** 播放暂停当前音乐 */
    const playPauseMusic = () => {
      state.baseAudioRef?.playOrPause();
    };
    /** 唤起音乐播放组件页 */
    const openAudioContent = ()=>{
      if(currentPlayMusic.value.id){
        state.showPlayer=true
      }
    }
    return {
      ...toRefs(state),
      closePlayer,
      currentPlayMusic,
      getSonger,
      playPauseMusic,
      openAudioContent
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.music_wrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 49px;
  z-index: 1000;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -2px 5px #f0f0f0;
  padding: 5px 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .music_wrapper-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .music_wrapper-left-img {
      width: 30px;
      height: 30px;
      border-radius: 5px;
      margin-right: 5px;
      overflow: hidden;
      background-color: #f0f0f0;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .music_wrapper-left-info {
      height: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      color: #707070;
      font-size: 12px;
      span {
        width: 100%;
        &:last-child {
          color: #999;
          font-size: 10px;
        }
      }
    }
  }
  .music_wrapper-right {
    width: 30px;
    height: 30px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../views/home/images/play.svg");
    &.stop {
      background-image: url("../views/home/images/stop.svg");
    }
  }
  .music_wrapper-player {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1005;
    background: #f2f2f2;
    transform: translateY(100%);
    @keyframes showAnimate {
      0% {
        transform: translateY(100%);
      }
      100% {
        transform: translateY(0%);
      }
    }
    @keyframes hideAnimate {
      0% {
        transform: translateY(0%);
      }
      100% {
        transform: translateY(100%);
      }
    }
    &.show {
      animation: showAnimate 1 0.3s forwards ease-in-out;
    }
    &.hide {
      animation: hideAnimate 1 0.3s forwards ease-in-out;
    }
  }
}
</style>
